<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>图片切换</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        h2,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #box {
            font-family: 'Microsoft YaHei';
            border: 1px solid #aaa;
            width: 200px;
            margin: 0 auto;
        }
        
        #box h2 {
            width: 100%;
            line-height: 42px;
            text-align: center;
            background-color: #ddd;
            font-weight: normal;
        }
        
        #box ul {
            padding: 5px;
        }
        
        #box li {
            width: 180px;
            height: 150px;
            margin: 5px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }
        
        #box li .content {
            width: 360px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        #box li .content img {
            float: left;
        }
        
        #box ul li span {
            display: block;
            width: 100%;
            height: 20px;
            color: #fff;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            position: absolute;
        }
        
        #box .one {
            top: 130px;
            left: 0;
        }
        
        #box .two {
            top: 150px;
            left: 0;
        }

        #box ul li:nth-child(1) span{
            background-color: #CF5460;
        }
        #box ul li:nth-child(2) span{
            background-color: #184B51;
        }
        #box ul li:nth-child(3) span{
            background-color: #2975AA;
        }
    </style>
</head>

<body>
    <div id="box">
        <h2>专辑推荐</h2>
        <ul>
            <li>
                <div class="content">
                    <img src="img/1_1.jpg" alt="">
                    <img src="img/1_2.jpg" alt="">
                </div>
                <span class="one">COCOON/可可尼</span>
                <span class="two">几何为网-极致绚烂</span>
            </li>
            <li>
                <div class="content">
                    <img src="img/2_1.jpg" alt="">
                    <img src="img/2_2.jpg" alt="">
                </div>
                <span class="one">INSUN/恩裳</span>
                <span class="two">2013春印象</span>
            </li>
            <li>
                <div class="content">
                    <img src="img/3_1.jpg" alt="">
                    <img src="img/3_2.jpg" alt="">
                </div>
                <span class="one">JNBY/江南布衣</span>
                <span class="two">NANMENG/南梦</span>
            </li>
        </ul>
    </div>
</body>

</html>

<script>

    $('#box ul li').hover(function(){
        // 左滑动图片
        $(this).find('.content').stop().animate({
            left:-180
        },400);
        // 上下滑动文字
        $(this).find('.one').stop().animate({
            top:150
        });
        $(this).find('.two').stop().animate({
            top:130
        });

    },function(){
        // 右滑动图片
        $(this).find('.content').stop().animate({
            left:0
        },400)
        // 上下滑动文字
        $(this).find('.one').stop().animate({
            top:130
        });
        $(this).find('.two').stop().animate({
            top:150
        });

    })

</script>